<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>这是第四节课</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			canvas {
				width: 500px;
				height: 500px;
				border: 1px red solid;
			}

			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;

			}
		</style>
	</head>
	<body>
		<!DOCTYPE html>
		<html>
		
		 <head>
		  <meta charset="utf-8" />
		  <title>第四节课</title>
		  <style type="text/css">
		   /*去除原来样式*/
		   
		   * {
		    padding: 0;
		    margin: 0;
		   }
		   
		   .container {
		    width: 100vw;
		    height: 100vh;
		    display: flex;
		    /*
		     * 将边框设置在中间
		     */
		    align-items: center;
		    justify-content: center;
		   }
		   
		   canvas {
		    width: 500px;
		    height: 500px;
		    border: 1px solid #333333;
		   }
		  </style>
		 </head>
		
		 <body>
		  <div class="container">
		   <canvas id="canvas" width="600" height="600"></canvas>
		  </div>
		 </body>
		
		 <script>
		  window.onload=function(){
		   
		  
		  let yCanvas = document.getElementById("canvas");
		  let yPen = yCanvas.getContext("2d");
		  //yPen.lineWidth=0;
		  //console.dir(yPen);
		  
		  
		  
		  // var yAnswer = document.getElementById("answer");
		  
		  // let n = 10;
		  // let str ="";
		  
		  // for (var i = 0; i < n; i++) { //第一个分号前是初始值，只执行一次，第二个分号
		  // 	for (var j = 0; j <= i; j++) {
		  // 		str += "*";
		  // 	}
		  // 	// str += "</br>";
		  // 	str += "\n";
		  // }
		  // console.log(str)
		  
		  //金字塔
		  // let n = 10;
		  // let str = "";
		  
		  // for (var i = 1; i <= n; i++) { //第一个分号前是初始值，只执行一次，第二个分号
		  // 	for (var j = 0; j < n-i; j++) {
		  // 		str += "";
		  // 	}
		  // 	for (var j = 0; j < i * 2 - 1; j++) {
		  // 		str += "*";
		  // 	}
		  // 	// str += "</br>";
		  // 	str += "\n";
		  // }
		  // console.log(str);
		  
		  
		  
		  
		  
		  
		  let data=[	       
		      {name:'第一季度',value:180, color:'red'},
		       {name:'第二季度',value:100, color:'green'},
		       {name:'第三季度',value:185, color:'blue'},
		       {name:'第四季度',value:100, color:'yellow'}
		   ]
		  
		  createSector(yPen,300,300,100,data);
		  
		  function createSector(yyPen,x,y,r,data){
		   sum = 0;
		   for(var i=0;i<data.length;i++){
		    sum+=data[i].value;
		   }
		   for(var i=0;i<data.length;i++){
		    data[i].percentage = ((data[i].value*1.0/sum)*360)
		   }
		   let startAngle=0;
		   for(var i=0;i<data.length;i++){
		    yPen.beginPath();
		    yPen.moveTo(x,y);
		    yPen.arc(x,y,r,startAngle,startAngle+(Math.PI/180)*data[i].percentage,false);
		    startAngle+=(Math.PI/180)*data[i].percentage;   
		    yPen.fillStyle=data[i].color;
		    yPen.fill();
		    yPen.stroke();
		    yPen.closePath();
		   }
		   console.dir(data);
		   
		  }
		  
		  }
		 </script>
		
		</html>
	</body>
</html>
//  	let str = "第一季度  总销售额：180  占比：38.3%";		  
		 //  	yyPen.font = "normal 900 30px 小篆";//normal 默认  italic斜体  oblque 斜体		  
		 //  	yyPen.strokeStyle = "red";//填充模式的颜色
		 //  	yyPen.strokeText(str, 10, 40,300);//显示文字的 X轴，Y轴坐标，最大宽度，单位是px
		 //  	yyPen.fillstyle ="red";
		 //  	// yyPen.fillText(str,10, 40,300);// 填充  
		 //  	console.dir(yyPen.measureText(str));
			
			// let str2 = "第二季度  总销售额：100  占比：21.3%";
			// yyPen.font = "normal 900 30px 小篆";//normal 默认  italic斜体  oblque 斜体		  
			// yyPen.strokeStyle = "green";//填充模式的颜色
			// yyPen.strokeText(str2, 10, 80,300);//显示文字的 X轴，Y轴坐标，最大宽度，单位是px
			// yyPen.fillstyle ="green";
			// // yyPen.fillText(str,10, 40,300);// 填充  
			// console.dir(yyPen.measureText(str2));
			
			// let str3 = "第三季度  总销售额：185  占比：39.4%";
			// yyPen.font = "normal 900 30px 小篆";//normal 默认  italic斜体  oblque 斜体		  
			// yyPen.strokeStyle = "blue";//填充模式的颜色
			// yyPen.strokeText(str3, 10, 120,300);//显示文字的 X轴，Y轴坐标，最大宽度，单位是px
			// yyPen.fillstyle ="blue";
			// // yyPen.fillText(str,10, 40,300);// 填充  
			// console.dir(yyPen.measureText(str3));
			
			// let str4 = "第四季度  总销售额：100  占比：21.3%";
			// yyPen.font = "normal 900 30px 小篆";//normal 默认  italic斜体  oblque 斜体		  
			// yyPen.strokeStyle = "yellow";//填充模式的颜色
			// yyPen.strokeText(str4, 10, 160,300);//显示文字的 X轴，Y轴坐标，最大宽度，单位是px
			// yyPen.fillstyle ="yellow";
			// // yyPen.fillText(str,10, 40,300);// 填充  
			// console.dir(yyPen.measureText(str4));